﻿$(document).ready(function () {
    var img_holder = document.getElementById('image-container');
    var imgWidth, imgHeight, holderHeight;
    var hammertime = Hammer(img_holder).on("doubletap", function (event) {

        imgWidth = $('#image-holder img').width();
        imgHeight = $('#image-holder img').height();

        if (imgWidth > imgHeight) {
            $('#image-holder').toggleClass('full-width').toggleClass('zoomed-in');
        } else {
            $('#image-holder').toggleClass('full-height').toggleClass('zoomed-in');
        }
    });
    
    var hammertime = Hammer(img_holder).on("drag", function (event) {
        if ($('#image-holder').hasClass('zoomed-in')) {
            $('#image-holder img').css('top', event.gesture.deltaY);
            $('#image-holder img').css('left', event.gesture.deltaX);
        }
    });
    
    var hammertime = Hammer(img_holder).on("dragend", function (event) {
        if ($('#image-holder').hasClass('zoomed-in')) {
            $('#image-holder').css('top', $('#image-holder').position().top + event.gesture.deltaY);
            $('#image-holder img').css('top', '0px');
            $('#image-holder').css('left', $('#image-holder').position().left + event.gesture.deltaX);
            $('#image-holder img').css('left', '0px');
        }
    });
});

function launchPhoto() {
    window.external.notify("LaunchPhotoChooser");
    showEditor();
}

function launchCamera() {
    window.external.notify("LaunchCamera");
    showEditor();
}

function showEditor() {
    $('#main-page').hide();
    $('#main-editor').show();
}

function hideEditor() {
    $('#main-page').show();
    $('#main-editor').hide();
}

function setPhotoWithDimensions(photoString) {
    var newImg = document.createElement('img');
    newImg.src = photoString;
    
    // need to calculate the appropriate width/height\
    var imageDiv = document.createElement('div');
    imageDiv.appendChild(newImg);
    imageDiv.id = 'image-holder';
    
    var imageContain = document.getElementById('image-container');
    imageContain.appendChild(imageDiv);
    imgWidth = $('#image-holder img').width();
    imgHeight = $('#image-holder img').height();

    if (imgWidth > imgHeight) {
        newImg.style.cssText = 'width:100%; height:auto;';
    } else {
        newImg.style.cssText = 'height:100%; width:auto !important;';
    }
}

function getViewportSize() {
    var viewportWidth;
    var viewportHeight;

    viewportWidth = window.innerWidth;
    viewportHeight = window.innerHeight;
    var outputElement = document.getElementById('browser-size');
    outputElement.innerHTML = viewportWidth + 'x' + viewportHeight;
}
